<template>
  <div id="app">
    <!-- <div class="nav" :style="{'height': (domHeight - 10) + 'px'}">
      <div class="nav-img">
        <img src="http://8.130.102.135:9000/museum/museum.jpg" alt="" class="img">
      </div>
      <div class="item" v-on:click="changeActived(0)">
        <i class="el-icon-setting"></i>
        <router-link to="/">展区管理</router-link>
      </div>
      <div class="item" v-on:click="changeActived(1)">
        <i class="el-icon-star-on"></i>
        <router-link to="/exhibit">藏品管理</router-link>
      </div>
      <div class="item" v-on:click="changeActived(2)">
        <i class="el-icon-s-help"></i>
        <router-link to="/culpro">文创管理</router-link>
      </div>
      <div class="item" v-on:click="changeActived(3)">
        <i class="el-icon-collection"></i>
        <router-link to="/ticket">门票管理</router-link>
      </div>
      <div class="item" v-on:click="changeActived(4)">
        <i class="el-icon-s-order"></i>
        <router-link to="/order">订单管理</router-link>
      </div>
    </div>
    <div class="content" :style="{'height': (domHeight - 10) + 'px', width: (domWidth - 350) + 'px'}">
      <div class="nav-box">
        <div class="nav-title">{{titleList[actived]}}</div>
        <div>登出图片</div>
      </div>
      <div class="content-box">
        <div class="content-nav">
          <router-view/>
        </div>
      </div>
    </div> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'appView',
  data () {
    return {
      domWidth: 0,
      domHeight: 0,
      actived: 0,
      titleList: ['展区管理', '藏品管理', '文创管理', '门票管理', '订单管理']
    }
  },
  methods: {
    getSystem () {
      // 浏览器窗口内部宽度
      this.domWidth = document.documentElement.clientWidth
      // 浏览器窗口内部高度
      this.domHeight = document.documentElement.clientHeight
      // console.log('this.domWidth: ', this.domWidth)
      // console.log('this.domHeight: ', this.domHeight)
      // console.log('window.innerHeight: ', window.innerHeight)
    },
    changeActived (index) {
      this.actived = index
    }
  },
  created () {
    this.getSystem()
  }
}
</script>

<style lang="less">
  #app {
    /* 修改路由本来样式，去除下划线和蓝色字体样式 */
    .router-link-active {
      text-decoration: none;
      /* color: yellow; */
      color: white;
    }
    a{
      text-decoration: none;
      color: #42b983;
    }

    /* 下面是样式 */
    display: flex;
    background-image: "http://8.130.102.135:9000/museum/museum.jpg";
    height: 881px;

    .nav {
      /* height: 881px; */
      width: 300px;
      background-color: #434142;

      .nav-img {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;

        .img {
          height: 160px;
          width: 160px;
        }
      }

      .item {
        height: 50px;
        width: 300px;
        background-color: #434142;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        padding: 20px 0;
        text-align: center;
        i {
          padding: 5px;
        }
      }
    }

    /* 右侧内容样式 */
    .content {
      /* background-color: #eceef0; */
      /* height: 889px; */
      .nav-box {
        padding: 10px 0 30px 0;
        display: flex;
        justify-content: space-between;
        .nav-title {
          font-size: 20px;
          width: 100px;
          display: flex;
          justify-content: center;
        }
      }
      .content-box {
        height: 775px;
        width: 100%;
        background-color: #f0f1f3;
        padding: 20px;

        .content-nav {
          height: 90%;
          width: 100%;
        }
      }
    }
  }
</style>
